{{#extend "header"}}
<title>消息中心</title>
<meta name="keywords" content="">
<meta name="description" content="">
{{/extend}}
{{#extend "style"}}
<style>
  .ui-message a > div{
    height: 2rem;
    border-bottom: 1px solid #ddd;
    padding: 0.6rem 0.6rem 0.4rem 0.6rem;
  }
  .ui-message a > div > i{
    float: left;
    width: 2rem;
    height: 2rem;
    background: url(/images/message.png) no-repeat top left;
    background-size: auto 2rem;
    margin-right: 0.6rem;
  }
  .ui-message > li:nth-child(2) > a > div > i{
    background-position-x: -2.4rem;
  }
  .ui-message > li:nth-child(3) > a > div > i{
    background-position-x: -4.78rem;
  }
  .ui-message a > div > div{
    overflow: hidden;
    position: relative;
    height: 2rem;
  }
  .ui-message a > div > div > p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    position: absolute; 
  }
  .ui-message a > div > div > p:first-child{
    top: 0.2rem
  }
  .ui-message a > div > div > p:last-child{
    bottom: 0.2rem;
    color: #999;
    font-size: 0.48rem;
  }
</style>
{{/extend}}
<body style="background: white;">
  {{>nav title="消息中心" class="ui-shadow"}}
  <ul class="ui-message">
    <li>
      <a>
        <div>
          <i></i>
          <div>
            <p>城市酒柜</p>
            <p>北京国美第一城增设18处酒柜,进口葡萄酒仅售29...</p>
          </div>
        </div>
      </a>
    </li>
    
    <li>
      <a>
        <div>
          <i></i>
          <div>
            <p>城市酒柜</p>
            <p>北京国美第一城增设18处酒柜,进口葡萄酒仅售29...</p>
          </div>
        </div>
      </a>
    </li>
    
    <li>
      <a>
        <div>
          <i></i>
          <div>
            <p>城市酒柜</p>
            <p>北京国美第一城增设18处酒柜,进口葡萄酒仅售29...</p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</body>

{{#extend "script"}}
<script src="/js/message.js?v={{{v}}}"></script>
{{/extend}}
